<template>
	<view class="danganadd">
		<view class="userinfo">
			<view class="title">
				必填项
			</view>
			
			<picker mode="selector" :range="guanxi" @change="guanxiChange">
				
				<view class="data_item">
					<view class="label">
						关系
					</view>
					<view class="item_input">
						<input type="text" v-model="userData.relationship" disabled placeholder="请选择" />
					</view>
					<view class="icon">
						<text class="iconfont iconarrow-right"></text>
					</view>
				</view>
			</picker>
			
			<view class="data_item">
				<view class="label">
					姓名
				</view>
				<view class="item_input">
					<input type="text" v-model="userData.name"  placeholder="请输入姓名" />
				</view>
			</view>
			
			<picker mode="date"  @change="timeChange">
				<view class="data_item">
					<view class="label">
						生日
					</view>
					<view class="item_input">
						<input type="text" v-model="userData.birthday" disabled placeholder="请选择" />
					</view>
					<view class="icon">
						<text class="iconfont iconarrow-right"></text>
					</view>
				</view>
			</picker>
			
			<view class="data_item">
				<view class="label">
					性别
				</view>
				<view class="item_input">
					<radio-group name="gender" @change="genderChange">
						<label class="radiolabel">
							<view class="radioitem">
								<radio :value="1" /><text>男</text>
							</view>
							<view class="radioitem">
								<radio :value="2" /><text>女</text>
							</view>
							<view class="radioitem">
								<radio :value="3" /><text>保密</text>
							</view>
							
							
						</label>
					</radio-group>
				</view>
			</view>
			
			<view class="title">
				选填项
			</view>
			
			<view class="data_item">
				<view class="label">
					身高
				</view>
				<view class="item_input">
					<input type="digit" v-model="userData.top"  placeholder="请输入身高,单位cm" />
				</view>
			</view>
			
			<view class="data_item">
				<view class="label">
					体重
				</view>
				<view class="item_input">
					<input type="digit" v-model="userData.weight"  placeholder="请输入体重,单位kg" />
				</view>
			</view>
			
			<view class="data_item">
				<view class="label">
					腰围
				</view>
				<view class="item_input">
					<input type="digit" v-model="userData.yaowei"  placeholder="请输入腰围,单位cm" />
				</view>
			</view>
			
			
			<picker mode="selector" :range="bool" @change="smokeChange">
				<view class="data_item">
					<view class="label">						 吸烟史
					</view>
					<view class="item_input">
						<input type="text" v-model="userData.issmoke" disabled placeholder="请选择" />
					</view>
					<view class="icon">						<text class="iconfont iconarrow-right"></text>
					</view>
				</view>
			</picker>
			
			<picker mode="selector" :range="bool" @change="drikingChange">
				<view class="data_item">
					<view class="label">
						 饮酒史
					</view>
					<view class="item_input">
						<input type="text" v-model="userData.isdriking" disabled placeholder="请选择" />
					</view>
					<view class="icon">
						<text class="iconfont iconarrow-right"></text>
					</view>
				</view>
			</picker>
			
			<picker mode="selector" :range="gan" @change="liverChange">
				<view class="data_item">
					<view class="label">
						 肝功能
					</view>
					<view class="item_input">
						<input type="text" v-model="userData.liver" disabled placeholder="请选择" />
					</view>
					<view class="icon">
						<text class="iconfont iconarrow-right"></text>
					</view>
				</view>
			</picker>
			
			<picker mode="selector" :range="gan" @change="kidneyChange">
				<view class="data_item">
					<view class="label">
						 肾功能
					</view>
					<view class="item_input">
						<input type="text" v-model="userData.kidney" disabled placeholder="请选择" />
					</view>
					<view class="icon">
						<text class="iconfont iconarrow-right"></text>
					</view>
				</view>
			</picker>
			
			<picker mode="selector" :range="marry" @change="marryChange">
				<view class="data_item">
					<view class="label">
						 婚姻
					</view>
					<view class="item_input">
						<input type="text" v-model="userData.marry" disabled placeholder="请选择" />
					</view>
					<view class="icon">
						<text class="iconfont iconarrow-right"></text>
					</view>
				</view>
			</picker>
			
			<picker mode="selector" :range="hasChildren" @change="hasChange">
				<view class="data_item">
					<view class="label">
						 生育状况
					</view>
					<view class="item_input">
						<input type="text" v-model="userData.hasChildren" disabled placeholder="请选择" />
					</view>
					<view class="icon">
						<text class="iconfont iconarrow-right"></text>
					</view>
				</view>
			</picker>
			
			<view class="binglist">
				<view class="bing_name">
					慢性病
				</view>
				<view class="itembox">
					<view class="item" :class="{'active': item.active == 1}" v-for="item in ManBing" :key="item._id" @click="isMan(item)">
						{{ item.name }}
					</view>
				</view>
			</view>
			
			<view class="binglist">
				<view class="bing_name">
					家族病史
				</view>
				<view class="itembox">
					<view class="item" :class="{'active': item.active == 1}" v-for="item in FamilyBing" :key="item._id" @click="isFamily(item)">
						{{ item.name }}
					</view>
				</view>
			</view>
			
			<view class="binglist">
				<view class="bing_name">
					药物过敏
				</view>
				<view class="itembox">
					<view class="item" :class="{'active': item.active == 1}" v-for="item in GM" :key="item._id" @click="isgm(item)">
						{{ item.name }}
					</view>
				</view>
			</view>
			
			<view class="binglist">
				<view class="bing_name">
					药物过敏
				</view>
				<view class="itembox">
					<view class="item" :class="{'active': item.active == 1}" v-for="item in FoodGM" :key="item._id" @click="isFood(item)">
						{{ item.name }}
					</view>
				</view>
			</view>
			
			<view class="binglist">
				<view class="bing_name">
					个人习惯
				</view>
				<view class="itembox">
					<view class="item" :class="{'active': item.active == 1}" v-for="item in SelfDone" :key="item._id" @click="isSelf(item)">
						{{ item.name }}
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="btn_box">
			<button type="primary" @click="SubData">确定添加</button>
		</view>
	</view>
</template>

<script>
	import uniCombox from "@/components/uni-combox/uni-combox"
	export default {
	    components: {uniCombox},
		data() {
			return {
				userData: {
					relationship:"",
					gender:"", 
					name:"",
					birthday:"",
					top:"",
					weight:"",
					yaowei:"",
					issmoke:"",
					isdriking:"",
					liver:"",
					kidney:"",
					marry:"",
					guomin:[],
					foodguomin:[],
					family:[],
					man:[],
					hasChildren: "",
					selfdone:[]
				},
				guanxi: ["自己", "父母","配偶","子女","朋友"],
				bool: ["是", "否"],
				gan: ["正常", "异常"],
				marry: ["未婚", "已婚", "其他"],
				hasChildren:["未生育", "备孕中", "怀孕中", "已生育"],
				ManBing: [],
				GM: [],
				FoodGM: [],
				FamilyBing: [],
				SelfDone: []
			}
		},
		onShow() {
			this.getAllBing()
		},
		onLoad( e ) {
			console.log(e);
			if(e.type == "add") {
				this.userData = {
						relationship:"",
						gender:"", 
						name:"",
						birthday:"",
						top:"",
						weight:"",
						yaowei:"",
						issmoke:"",
						isdriking:"",
						liver:"",
						kidney:"",
						marry:"",
						guomin:[],
						foodguomin:[],
						family:[],
						man:[],
						hasChildren: "",
						selfdone:[]
					}
				} else {
					this.getMyDangan()
				}
			
		},
		computed:{
			token() {
				return this.$store.state.token
			}
		},
		methods: {
			
			// 获取档案信息
			async getMyDangan() {
				let res = await this.$Request("/admin/getUserDangan", "", this.token)
				let code = res.data.code 
				if(code == 200) {
					this.userData = res.data.data
				}
			},
			// 获取所有病
			async getAllBing() {
				let res = await this.$Request("/indexpage/getAllBing","","")
				// console.log(res);
				let code = res.data.code
				if(code == 200) {
					let all = res.data.data
					this.ManBing = all.man
					this.GM = all.gm 
					this.FamilyBing = all.family
					this.FoodGM = all.foodgm 
					this.SelfDone = all.selfdone
				}
			},
			// 选择关系
			guanxiChange( e ) {
				this.userData.relationship = this.guanxi[e.detail.value]
			},
			// 选择生日
			timeChange( e ) {
				// console.log(e);
				this.userData.birthday = e.detail.value
			},
			// 性别变化
			genderChange(e) {
				// console.log(e);
				this.userData.gender = e.detail.value
			},
			// 吸烟史
			smokeChange(e) {
				this.userData.issmoke = this.bool[e.detail.value]
			},
			// 饮酒史
			drikingChange(e) {
				this.userData.isdriking = this.bool[e.detail.value]
			},
			// 肝功能
			liverChange(e) {
				this.userData.liver = this.gan[e.detail.value] 
			},
			// 肾功能
			kidneyChange(e) {
				this.userData.kidney = this.gan[e.detail.value] 
			},
			// 婚姻
			marryChange(e) {
				this.userData.marry = this.marry[e.detail.value] 
			},
			// 生育
			hasChange(e) {
				this.userData.hasChildren = this.hasChildren[e.detail.value] 
			},
			
			// 计算 慢性病
			isMan(item) {
				let isok = this.userData.man.indexOf(item.name)
				// console.log(isok);
				if(isok != -1) {
					this.userData.man.splice(isok, 1)
					this.ManBing.forEach( el => {
						if(el.name == item.name) {
							el.active = "2"
						}
					})
				} else {
					
					this.userData.man.push(item.name)
					this.ManBing.forEach( el => {
						if(el.name == item.name) {
							el.active = "1"
						}
					})
					// console.log(this.userData.man);
				}
			},
			
			// 计算 家族病史
			isFamily(item) {
				let isok = this.userData.family.indexOf(item.name)
				// console.log(isok);
				if(isok != -1) {
					this.userData.family.splice(isok, 1)
					this.FamilyBing.forEach( el => {
						if(el.name == item.name) {
							el.active = "2"
						}
					})
				} else {
					
					this.userData.family.push(item.name)
					this.FamilyBing.forEach( el => {
						if(el.name == item.name) {
							el.active = "1"
						}
					})
					// console.log(this.userData.man);
				}
			},
			
			// 计算 药物过敏
			isgm(item) {
				let isok = this.userData.guomin.indexOf(item.name)
				// console.log(isok);
				if(isok != -1) {
					this.userData.guomin.splice(isok, 1)
					this.GM.forEach( el => {
						if(el.name == item.name) {
							el.active = "2"
						}
					})
				} else {
					
					this.userData.guomin.push(item.name)
					this.GM.forEach( el => {
						if(el.name == item.name) {
							el.active = "1"
						}
					})
					// console.log(this.userData.man);
				}
			},
			
			// 计算 食物过敏
			isFood(item) {
				let isok = this.userData.foodguomin.indexOf(item.name)
				// console.log(isok);
				if(isok != -1) {
					this.userData.foodguomin.splice(isok, 1)
					this.FoodGM.forEach( el => {
						if(el.name == item.name) {
							el.active = "2"
						}
					})
				} else {
					
					this.userData.foodguomin.push(item.name)
					this.FoodGM.forEach( el => {
						if(el.name == item.name) {
							el.active = "1"
						}
					})
					// console.log(this.userData.man);
				}
			},
			
			// 计算 个人习惯
			isSelf(item) {
				let isok = this.userData.selfdone.indexOf(item.name)
				// console.log(isok);
				if(isok != -1) {
					this.userData.selfdone.splice(isok, 1)
					this.SelfDone.forEach( el => {
						if(el.name == item.name) {
							el.active = "2"
						}
					})
				} else {
					
					this.userData.selfdone.push(item.name)
					this.SelfDone.forEach( el => {
						if(el.name == item.name) {
							el.active = "1"
						}
					})
					// console.log(this.userData.man);
				}
			},
			
			// 检测数据
			checkData() {
				let { name, relationship, gender, birthday } = this.userData
				if(name && relationship && gender && birthday) {
					return true
				} else {
					uni.showToast({
						title:"缺少必填数据",
						icon: "loading"
					})
					return false
				}
			},
			
			// 添加或修改档案
			async SubData() {
				let ready = this.checkData()
				// console.log(this.token);
				if(ready) {
					let res = await this.$Request("/admin/addUserDangan", this.userData, this.token)
					let code = res.data.code
					if(code == 204) {
						uni.showToast({
							title: "添加成功",
							icon: "success",
							duration: 3000,
						})
						setTimeout(() => {
							uni.navigateTo({
								url:"../dangan/dangan"
							})
						}, 2000)
					}
				}
			},
			
		},
	}
</script>

<style scoped lang="scss">
	.danganadd {
		width: 100%;
		box-sizing: border-box;
		.userinfo {
			width: 100%;
			.data_item {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 10rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F5F5F5;
				margin: 10rpx 0;
				font-size: 34rpx;
				.label {
					width: 200rpx;
					padding-left: 20rpx;
				}
				.item_input {
					text-align: right;
					width: 530rpx;
					.radiolabel {
						width: 100%;
						display: flex;
						justify-content: space-around;
					}
				}
				.icon {
					width: 60rpx;
					color: #999999;
					padding-left: 20rpx;
				}
			}
		}
		.title {
			width: 100%;
			background-color: #aaa;
			line-height: 60rpx;
			height: 60rpx;
			color: #f2f2f2;
			padding-left: 30rpx;
			font-size: 24rpx;
		}
		.binglist {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 34rpx;
			.itembox {
				width: 100%;
				box-sizing: border-box;
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.item {
					padding: 15rpx;
					background-color: #f2f2f2;
					border-radius: 30rpx;
					font-size: 20rpx;
					margin: 10rpx;
				}
				.active {
					background-color: green;
					color: #fff;
				}
			}
		}
		.btn_box {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			padding: 20rpx 0;
			button {
				width: 600rpx;
				font-size: 26rpx;
			}
		}
	}
</style>
